<template>

  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="培训汇总明细" name="培训汇总明细">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
          <!-- <el-form-item label="培训名称" prop="activityName">
            <el-input v-model="queryParams.activityName" placeholder="请输入培训名称" clearable @keyup.enter="handleQuery" />
          </el-form-item> -->
          <el-form-item label="培训部门" prop="deptId">
            <el-tree-select style="width:100%" v-model="queryParams.deptId" :data="deptOptions" @node-click="handleNodeClick($event,'queryParams')"
              :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择培训部门" check-strictly />
          </el-form-item>
          <el-form-item label="日期" prop="monthYear">
            <el-date-picker style="margin-right:8px" v-model="queryParams.dateSection" type="daterange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" @change="bindChangeQueryAllDate" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['audit:train:bookExport']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="activityList" @selection-change="handleSelectionChange" show-overflow-tooltip>

          <el-table-column label="序号" align="center" width="65" type="index" />
          <el-table-column label="收费站" align="center" prop="deptName" />
          <el-table-column label="计划时间" align="center" prop="planDate">
            <template #default="scope">
              <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="培训项目" align="center" prop="trainItem" />
          <el-table-column label="学习内容" align="center" prop="studyContent" />
          <el-table-column label="培训部门" align="center" prop="trainDeptName" />
          <el-table-column label="培训时间" align="center" prop="trainDate">
            <template #default="scope">
              <span>{{ parseTime(scope.row.trainDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="培训对象" align="center" prop="trainOb" />
          <el-table-column label="授课人" align="center" prop="teacher" />

          <el-table-column label="培训方式" align="center" prop="trainMethod"></el-table-column>
          <el-table-column label="考核形式" align="center" prop="checkMethod"></el-table-column>
          <el-table-column label="培训文件" align="center" prop="imgList">
            <template #default="scope">
              <image-preview :src="scope.row.imgList" :width="50" :height="50" />
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
              <span>{{scope.row.status==0?'待培训':'已完成'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" />

          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="View" @click="handleUpdate(scope.row)" v-hasPermi="['audit:train:query']">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

      </el-tab-pane>
      <el-tab-pane label="培训统计" name="培训统计" v-hasPermi="['audit:train:statistics']">
        <el-form :model="querytSummaryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="培训部门" prop="deptId">
            <el-tree-select style="width:100%" v-model="querytSummaryParams.deptId" :data="deptOptions"
              @node-click="handleNodeClick($event,'querytSummaryParams')" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
              placeholder="请选择培训部门" check-strictly />
          </el-form-item>
          <el-form-item label="年度" prop="activityTime">
            <el-date-picker v-model="querytSummaryParams.activityTime" format="YYYY" value-format="YYYY" type="year" placeholder="请选择年份"
              @change="updateTimerValue" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSummaryQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExportStatistics" v-hasPermi="['audit:train:statisticsExport']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="summaryList">
          <el-table-column label="收费站" align="center" prop="deptName" />
          <el-table-column label="计划演练次数" align="center" prop="planCount" />
          <el-table-column label="已完成演练次数" align="center" prop="finishCount" />

          <el-table-column label="年度" align="center" prop="statYear" />

        </el-table>

        <pagination v-show="total>0" :total="summaryTotal" v-model:page="querytSummaryParams.pageNum" v-model:limit="querytSummaryParams.pageSize"
          @pagination="getList" />

      </el-tab-pane>
    </el-tabs>
    <!-- <Details :dialogVisible="isDetails" :rowDetails="rowDetails" @handleClose="handleClose" /> -->

    <!-- 添加或修改培训对话框 -->
    <el-dialog :title="title" v-model="isDetails" width="1000px" append-to-body>
      <el-form ref="activityRef" :model="form" label-width="80px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="收费站" prop="deptId">
              <el-tree-select style="width:100%" class="inputDeep" v-model="form.deptId" :data="deptOptions" @node-click="handleNodeClick($event,'form')"
                :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择收费站" check-strictly clearable
                :disabled="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划时间" prop="planDate">
              <el-date-picker clearable style="width:100%" v-model="form.planDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择" :disabled="isView">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="培训项目" prop="trainItem">
              <el-input v-model="form.trainItem" placeholder="请输入" style="width:100%" :disabled="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学习内容" prop="studyContent">
              <el-input v-model="form.studyContent" placeholder="请输入" style="width:100%" :disabled="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训部门" prop="trainDept">
              <el-tree-select style="width:100%" class="inputDeep" v-model="form.trainDept" :data="deptOptions" @node-click="handleNodeClick($event,'form')"
                :disabled="isView" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择培训部门" check-strictly
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训时间" prop="trainDate">
              <el-date-picker style="width:100%" clearable v-model="form.trainDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择培训时间"
                :disabled="isView">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训对象" prop="trainOb">
              <el-input v-model="form.trainOb" placeholder="请输入" style="width:100%" :disabled="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授课人" prop="teacher">
              <el-input v-model="form.teacher" placeholder="请输入" style="width:100%" :disabled="isView" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="培训方式" prop="trainMethod">
              <el-input v-model="form.trainMethod" placeholder="请输入" style="width:100%" :disabled="isView" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="考核形式" prop="checkMethod">
              <el-input v-model="form.checkMethod" placeholder="请输入" style="width:100%" :disabled="isView" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="相关文件" prop="fileList">
          <div class="img-box">
            <CusUpload :modelValue="form.fileList1" @update:modelValue="updateValue($event,0)" :limit="1" :isShowTip="false" name="全年计划" />
            <div class="img-tips">全年计划</div>
          </div>
          <div class="img-box">
            <CusUpload :modelValue="form.fileList2" @update:modelValue="updateValue($event,1)" :isShowTip="false" name="方案通知" />
            <div class="img-tips">方案通知</div>
          </div>
          <div class="img-box">
            <CusUpload :modelValue="form.fileList3" @update:modelValue="updateValue($event,2)" :isShowTip="false" name="资料" />
            <div class="img-tips">资料</div>
          </div>
          <div class="img-box">
            <CusUpload :modelValue="form.fileList4" @update:modelValue="updateValue($event,3)" :isShowTip="false" name="签到表" />
            <div class="img-tips">签到表</div>
          </div>
          <div class="img-box">
            <CusUpload :modelValue="form.fileList5" @update:modelValue="updateValue($event,4)" :isShowTip="false" name="培训记录" />
            <div class="img-tips">培训记录</div>
          </div>
          <div class="img-box">
            <CusUpload :modelValue="form.fileList6" @update:modelValue="updateValue($event,5)" :isShowTip="false" name="评价报告" />
            <div class="img-tips">评价报告</div>
          </div>
          <div class="img-box">
            <CusUpload :modelValue="form.fileList7" @update:modelValue="updateValue($event,6)" :isShowTip="false" name="试卷" />
            <div class="img-tips">试卷</div>
          </div>
          <div class="img-box">
            <CusUpload :modelValue="form.fileList8" @update:modelValue="updateValue($event,7)" :isShowTip="false" name="成绩表" />
            <div class="img-tips">成绩表</div>
          </div>

        </el-form-item>
        <el-form-item label="现场照片" prop="trainImg" >
          <ImageUpload :modelValue="form.trainImg" v-model="form.trainImg" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input style="width:100%" v-model="form.remark" type="textarea" placeholder="请输入内容" :disabled="isView" :rows="5" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="Activity">
import moment from 'moment'
import { deptTreeSelect } from "@/api/system/user";
import { getTrainBook, getTrainStatistics, getTrain } from "@/api/charge/train";
import CusUpload from "@/components/Custom/CusUpload"
import Details from "./Details";
const { proxy } = getCurrentInstance();
const { activity_type, activity_mode } = proxy.useDict('activity_type', 'activity_mode');
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const activityList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const deptOptions = ref([])
const summaryList = ref([])
const summaryTotal = ref(0)
const activeName = ref('培训汇总明细')
const isDetails = ref(false)
const rowDetails = ref({})
const deptId = ref()
const isView = ref(true)


const data = reactive({
  form: {
    fileList: [],
    fileList1: [],
    fileList2: [],
    fileList3: [],
    fileList4: [],
    fileList5: [],
    fileList6: [],
  },
  querytSummaryParams: {
    pageNum: 1,
    pageSize: 10,
    activityTime: null,
    deptId: null,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    activityName: null,
    deptId: null,
    status: null
  },
  rules: {
  }
});

const { queryParams, form, rules, querytSummaryParams } = toRefs(data);
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
/** 查询培训列表 */
function getList() {
  loading.value = true;
  getTrainBook(queryParams.value).then(response => {
    activityList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
  };
  proxy.resetForm("activityRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function handleSummaryQuery() {
  getSummaryList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value = { pageNum: 1, pageSize: 10, deptId: deptId.value }
  querytSummaryParams.value = { pageNum: 1, pageSize: 10, deptId: deptId.value, activityTime: new Date().getFullYear() }
  handleQuery();
}
const bindChangeQueryAllDate = (val) => {
  queryParams.value.dateSection = [moment(val[0]).format("YYYY-MM-DD"), moment(val[1]).format("YYYY-MM-DD")]
  queryParams.value.startDate = queryParams.value.dateSection[0];
  queryParams.value.endDate = queryParams.value.dateSection[1];
  // startDate和endDate 
}


// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}



/** 修改按钮操作 */
function handleUpdate(row, type) {
  reset();
  const _id = row.id || ids.value
  getTrain(_id).then(response => {
    form.value = response.data;
    form.value.deptId = deptId.value;

    if (response.data && response.data.tbActivityFile2List && response.data.tbActivityFile2List.length) {
      form.value.fileList = response.data.tbActivityFile2List;
      response.data.tbActivityFile2List.forEach(item => {
        switch (item.name) {
          //  <!-- 训：全年计划（1月15日前）、方案通知、资料、签到表、培训记录、照片、评价报告、试卷、成绩表） -->
          case '全年计划':
            form.value.fileList1 = [item]
            break;
          case '方案通知':
            form.value.fileList2 = [item]
            break;
          case '资料':
            form.value.fileList3 = [item]
            break;
          case '签到表':
            form.value.fileList4 = [item]
            break;
          case '培训记录':
            form.value.fileList5 = [item]
            break;
          case '评价报告':
            form.value.fileList6 = [item]
            break;
          case '试卷':
            form.value.fileList7 = [item]
            break;
          case '成绩表':
            form.value.fileList8 = [item]
            break;
        }

      })
    } else {
      form.value.fileList = [];
    }



    isDetails.value = true;
    title.value = "查看详情";
    isView.value = true;

  });
}


function handleNodeClick(data, name) {
  if (name == 'queryParams') {
    queryParams.value.deptId = data.id;
  } else if (name == 'querytSummaryParams') {
    querytSummaryParams.value.deptId = data.id;
  } else {
    form.value.activityDeptId = data.id;
  }


}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('audit/train/bookExport', {
    ...queryParams.value
  }, `稽核培训汇总明细_${new Date().getTime()}.xlsx`)
}

/** 导出按钮操作 */
function handleExportStatistics() {
  proxy.download('audit/train/statisticsExport  ', {
    ...querytSummaryParams.value
  }, `稽核培训统计_${new Date().getTime()}.xlsx`)
}



const handleClick = (data, index) => {
  getSummaryList()
}
/** 查询培训列表 */
function getSummaryList() {
  loading.value = true;
  getTrainStatistics(querytSummaryParams.value).then(response => {
    summaryList.value = response.rows;
    summaryTotal.value = response.total;
    loading.value = false;
  });
}
const updateTimerValue = (val) => {
  querytSummaryParams.value.activityTime = val;
}

const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {

      deptId.value = res.user.dept.deptId;
      queryParams.value.deptId = deptId.value;
      querytSummaryParams.value.deptId = deptId.value;
      querytSummaryParams.value.activityTime = new Date().getFullYear().toString()
      getList()
    }

  })
}
getDeptId()
getDeptTree()
</script>

<style scoped>
.img-box {
  margin-right: 15px;
}
.img-box .img-tips {
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin-top: 10px;
}
.demo-tabs {
  margin-bottom: 20px;
}
.pagination-container {
  min-height: 80px;
}

.content-cus .el-descriptions__cell {
  border: none !important;
}
.border-top {
  border-top: 1px solid #ebeef5;
}
</style>
